<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <h1>{{name}}</h1>
        <ul>
          <li v-for="x in 10"></li>
        </ul>
      </div>
    </div>
  </body>
  <script>
    // Vue实例构建的过程
    // 数据劫持  proxy
    // DOM更新 - 虚拟DOM技术
    /*
      1.编译成ast结构树
      [
        {
          tag:"div",
          attr:{
            class:"box"
          },
          children:[
            {
              tag:"h1",
              text:"{{name}}"
            },
            {
              tag:"ul",
              children:[
                {
                  tag:"li",
                  attr:{
                    "v-for":"x in 10"
                  }
                }
              ]
            }
          ]
        }
      ]
      2.ast结构树结合Vue实例中的数据  生成虚拟DOM树
      [
        {
          tag:"div",
          attr:{
            class:"box"
          },
          children:[
            {
              tag:"h1",
              text:"2309"
            },
            {
              tag:"ul",
              children:[
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
              ]
            }
          ]
        }
      ]

      3.根据虚拟DOM创建真实DOM树 插入页面  完成了第一次渲染


      4.劫持data中的数据(响应数据),当数据发生变化时,使用ast结构树结合最新数据 再次生成虚拟DOM树
        data.name="2310"
        [
        {
          tag:"div",
          attr:{
            class:"box"
          },
          children:[
            {
              tag:"h1",
              text:"2310"
            },
            {
              tag:"ul",
              children:[
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
                {tag:"li"}
              ]
            }
          ]
        }
      ]
      新旧虚拟DOM树 进行diff运算 找出有变化的节点 生成一个更新补丁
      [
        {
          el:"",
          text:"2310"
        }
      ]
      根据记录 更新页面中的真实DOM节点


    1.AST结构树  2.生成虚拟DOM  3.创建真实DOM  4.数据劫持   5.生成新的虚拟DOM树  diff运算  更新DOM
    */
    let app = Vue.createApp({
      data() {
        return {
          name: "2309",
        };
      },
      // 生命周期 this指向当前实例
      beforeCreate() {
        console.log("创建前");
      },
      created() {
        console.log(
          "实例创建完毕 完成了数据劫持",
          this.name,
          "可以在此完成数据的初始化操作"
        );
      },
      beforeMount() {
        console.log(
          "挂载前 真实DOM插入页面之前",
          document.getElementById("app").innerHTML || "空"
        );
      },
      mounted() {
        console.log(
          "挂载后 真实DOM插入完毕 完成第一次渲染",
          document.getElementById("app").innerHTML || "空"
        );
      },
      beforeUpdate() {
        console.log(
          "数据变化DOM更新之前",
          this.name,
          document.getElementById("app").innerHTML
        );
      },
      updated() {
        console.log(
          "数据变化DOM更新之后",
          this.name,
          document.getElementById("app").innerHTML
        );
      },
      beforeUnmount() {
        console.log("销毁之前  组件v-if, 清除定时器、全局的事件绑定");
      },
      unmounted() {
        console.log("销毁之后  组件v-if");
      },
    });

    // mounted  beforeUnmount
    app = app.mount("#app");
  </script>
</html>
